<template>
  <section class="login-wrapper">
    <div class="main-wrapper">
      <div class="main-content">
        <div class="top-wrapper">
          <div class="img">
            <img src="../../assets/image/login_logo.png"/>
          </div>
          <span class="name">气味图书馆</span>
        </div>
        <div class="center-wrapper">
          <transition :name="`${transitionName}-fade`" mode="out-in">
            <component @action="action" :mobile="mobile" :is="view"></component>
          </transition>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
  import ElFooter from '../layout/footer.vue'
  import LoginTpl from './template/login-tpl.vue'
  import ForgetTpl from './template/forget-tpl.vue'
  import SetWordTpl from './template/set-word-tpl.vue'
  export default {
    data () {
      return {
        view: 'login',
        transitionName: 'in',
        mobile: '',
        token: this.$localStorage.get(this.$const.COOKIE.KEY_TOKEN)
      }
    },
    components: {
      ElFooter,
      'login': LoginTpl,
      'forget': ForgetTpl,
      'nextStep': SetWordTpl
    },
    methods: {
      action (type, value) {
        switch (type) {
          case 'login':
            this.view = 'login'
            this.transitionName = 'out'
            break
          case 'forget':
            this.view = 'forget'
            this.transitionName = 'in'
            break
          case 'nextStep':
            this.mobile = value
            this.view = 'nextStep'
            this.transitionName = 'in'
            break
        }
      },
      init () {
        if (this.token) {
          this.token = this.token || ''
          this.$store.dispatch('USER_LOGOUT').then(res => {
            if (res.result) {
              this.$message.success('退出登录成功！')
            } else {
              this.$message.error(res.msg)
            }
          })
        }
      }
    },
    mounted () {
      // this.init()
    }
  }
</script>

<style lang="scss" >

  .in-fade-enter-active{
    transition: all 0.3s linear
  }
  .in-fade-leave-active{
    transition: all 0.1s linear
  }
  .in-fade-leave-to{
    opacity: 0
  }
  .in-fade-enter{
    opacity: 0;
    transform: translate3d(30px, 0, 0);
  }
  .out-fade-enter-active{
    transition: all 0.3s linear
  }
  .out-fade-leave-active{
    transition: all 0.1s linear
  }
  .out-fade-leave-to{
    opacity: 0;
    transform: translate3d(30px, 0, 0);
  }
  .out-fade-enter{
    opacity: 0;
  }

.login-wrapper{
  height: 100%;
  background: #fff;
  .main-wrapper{
    min-height: 100%;
    box-sizing: border-box;
    padding-bottom: 54px;

    .main-content{
      height: 100%;
      .top-wrapper{
        background: steelblue;
        width: 100%;
        padding-top: 90px;
        .img{
          display: inline-block;
          vertical-align: middle;
          img{
            width: 228px;
            height: 80px;
          }
        }
        .name{
          display: inline-block;
          vertical-align: middle;
          color: #fff;
          font-size:36px;
          font-family:PingFangSC-Regular;
          font-weight:400;
        }
        .name:before{
          content: '';
          width: 2px;
          height:50px;
          background: #fff;
        }
      }
      .center-wrapper{
        position: absolute;
        left: 70%;
        top: 60%;
        /*display:flex;*/
        /*justify-content: center;*/
        /*align-items: center;*/

      }
    }
  }
  .footer-wrapper{
    position: relative;
    top: -54px;
  }
  .el-form-item{
    padding: 0 !important;
  }
}


</style>
